<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/vue.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <!-- <script src="js/jquery.resizableColumns.js"></script> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link href="css/style.css" rel="stylesheet">
    <title>个税计算器</title>
</head>

<body>
    <div id="app">
        <h2>个税计算器</h2>
        <div class="container">
            <div class="left">
                <el-form :model="ruleForm" label-width="110px" width="50%" :rules='rules' ref="forms">
                    <el-form-item label="基本工资" prop="basePay">
                        <el-input v-model="ruleForm.basePay" @input="change"></el-input>
                    </el-form-item>
                    <el-form-item label="年终奖" prop="bonus">
                        <el-input v-model="ruleForm.bonus"></el-input>
                    </el-form-item>
                    <el-form-item label="四险一金" class="sixian">
                        <el-form-item label="养老保险基数" prop="yanglao">
                            <el-input v-model="ruleForm.yanglao" @input="flag=false"></el-input>
                        </el-form-item>
                        <el-form-item label="医疗保险基数" prop="yiliao">
                            <el-input v-model="ruleForm.yiliao"></el-input>
                        </el-form-item>
                        <el-form-item label="失业保险基数" prop="shiye">
                            <el-input v-model="ruleForm.shiye"></el-input>
                        </el-form-item>
                        <el-form-item label="公积金基数" prop="gongjijin">
                            <el-input v-model="ruleForm.gongjijin"></el-input>
                        </el-form-item>
                    </el-form-item>
                    <el-form-item label="专项附加扣除">
                        <el-form-item label="子女教育" prop="zinv">
                            <el-select v-model="value3" placeholder="请选择">
                                <el-option v-for="item in ruleForm.zinv" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            <label class='red'>每个子女1000元</label>
                        </el-form-item>
                        <el-form-item label="房贷（房租）" prop="fangdai">
                            <el-select v-model="value1" placeholder="请选择">
                                <el-option v-for="item in ruleForm.fangdai" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            <label class='red'>房租1000,房贷1500,二选一</label>
                        </el-form-item>
                        <el-form-item label="赡养老人" prop="laoren">
                            <!-- <el-input v-model="ruleForm.laoren"></el-input> -->
                            <el-select v-model="value2" placeholder="请选择">
                                <el-option v-for="item in ruleForm.laoren" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            <label class='red'>赡养老人2000</label>
                        </el-form-item>
                    </el-form-item>
                    <el-button @click='compu'>计算</el-button>
                </el-form>
            </div>
            <div class="right">
                <h4>工资部分</h4>
                <!-- <el-table :data='resForm' ref="res" id="tb" border>
                    <el-table-column prop="months" label="">
                    </el-table-column>
                    <el-table-column prop="basePay" label="税前收入">
                    </el-table-column>
                    <el-table-column prop="yanglao" label="养老保险">
                    </el-table-column>
                    <el-table-column prop="yiliao" label="医疗保险">
                    </el-table-column>
                    <el-table-column prop="shiye" label="失业保险">
                    </el-table-column>
                    <el-table-column prop="gongjijin" label="公积金">
                    </el-table-column>
                    <el-table-column prop="tax" label="个税">
                    </el-table-column>
                    <el-table-column prop="allTax" label="全年累计个税">
                    </el-table-column>
                    <el-table-column prop="afterTax" label="税后收入">
                    </el-table-column>
                    <el-table-column prop="allAfterTax" label="全年累计税后收入">
                    </el-table-column>
                </el-table> -->
                <table cellspacing="0" cellpadding='0'>
                    <tr>
                        <td>月份</td>
                        <td>税前收入</td>
                        <td>养老保险</td>
                        <td>医疗保险</td>
                        <td>失业保险</td>
                        <td>公积金</td>
                        <td>个税</td>
                        <td>全年累计个税</td>
                        <td>税后收入</td>
                        <td>全年累计税后收入</td>
                    </tr>
                    <tr v-for="item in resForm">
                        <td>{{item.months}}</td>
                        <td>{{item.basePay}}</td>
                        <td>{{item.yanglao}}</td>
                        <td>{{item.yiliao}}</td>
                        <td>{{item.shiye}}</td>
                        <td>{{item.gongjijin}}</td>
                        <td>{{item.tax}}</td>
                        <td>{{item.allTax}}</td>
                        <td>{{item.afterTax}}</td>
                        <td>{{item.allAfterTax}}</td>
                    </tr>
                </table>
                <h4>年终奖部分</h4>
                <!-- <el-table :data='nian'>
                    <el-table-column prop="all" label="税前部分">
                    </el-table-column>
                    <el-table-column prop="tax" label="个税">
                    </el-table-column>
                    <el-table-column prop="afterTax" label="税后部分">
                    </el-table-column>
                </el-table> -->

                <table>
                    <tr>
                        <td>税前部分</td>
                        <td>个税</td>
                        <td>税后部分</td>
                    </tr>
                    <tr v-for="item in nian">
                        <td>{{item.all}}</td>
                        <td>{{item.tax}}</td>
                        <td>{{item.afterTax}}</td>
                    </tr>
                </table>
                <!-- <el-table> -->
                <!-- <el-table-column></el-table-column> -->
                <!-- </el-table> -->
                <!-- <el-form></el-form> -->
                <h4>合计：</h4>
                <el-form :model="shouru" label-width="180px" width="50%" text-align="left">
                    <el-form-item label="全年合计收入" prop="allShouru">
                        <el-input v-model="shouru.allShouru" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="全年合计个税" prop="allTax">
                        <el-input v-model="shouru.allTax" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="全年收入（含公积金）" prop="allTax">
                        <el-input v-model="shouru.total" disabled></el-input>
                    </el-form-item>
                </el-form>

            </div>
        </div>

    </div>
    <script src="js/type.js"></script>
</body>

</html>